<template>
    <el-container class="sys_account_set_container">
        <el-main>
            <el-card class="box-card">
                <headerTemplate slot="header" ref="header"
                                :table-ref="tableOptions.ref"
                                :toolbar_buttons="headerOption.toolbar_buttons"
                                :toolbar_filter="headerOption.toolbar_filter"
                                :searchForm="queryData"
                                @event="handleHeaderEvent">
                </headerTemplate>
                <div class="card_content">
                    <vxeTableTemplate :data="dataList" :options.sync="tableOptions"
                                      @event="handleTableEvent" />
                </div>
            </el-card>
            <WeixinSettingDialog ref="weixinSettingDialog" />
        </el-main>
    </el-container>
</template>

<script>
import sysAccountSetApi from "@common/api/system/sysAccountSetApi";
import WeixinSettingDialog from "./dialog/WeixinSettingDialog";
import provide from "@common/mixins/provide";

export default {
    extends: provide,
    name: "SysConfig3rd",
    components: { WeixinSettingDialog },
    data() {
        let $this = this;
        return {
            headerOption: {
                toolbar_buttons: [
                    {
                        id: "refresh",
                        icon: "el-icon-refresh-right",
                        show: true,
                        method: () => {
                            $this.getList();
                        },
                    },
                ],
                toolbar_filter: [
                    { type: "text", field: "code", label: "编码" },
                    {
                        type: "select",
                        field: "state",
                        label: "状态",
                        options: [
                            { code: 0, name: "等待建库" },
                            { code: 1, name: "建库中" },
                            { code: 2, name: "运行中" },
                            { code: -1, name: "建库失败" },
                            { code: -2, name: "已过期" },
                        ]
                    },
                ],
            },
            dataList: [],
            clientList: [],
            stateList: [
                { code: 0, name: "等待建库" },
                { code: 1, name: "建库中" },
                { code: 2, name: "运行中" },
                { code: -1, name: "建库失败" },
                { code: -2, name: "已过期" },
            ],
            tableOptions: {
                ref: 'AccountSetTable',
                container: '.sys_account_set_container',
                multiSelect: true,
                columns: [
                    {
                        label: '拥有者',
                        prop: 'owner_name',
                        width: 90,
                        align: 'center',
                        formatter: (row) => {
                            if (row.owner_name) {
                                return row.owner_name
                            } else {
                                return row.owner_sid
                            }
                        }
                    },
                    {
                        label: '账套编码',
                        prop: 'code',
                        align: 'center',
                        width: 90,
                    },
                    {
                        label: '启用时间',
                        prop: 'start_date',
                        align: 'center',
                        width: 160,
                    },
                    {
                        label: '截止时间',
                        prop: 'end_date',
                        align: 'center',
                        width: 90,
                        formatter: (row) => {
                            if (row.end_date && row.end_date.length > 10) {
                                return row.end_date.substring(0, 10);
                            } else {
                                return row.end_date
                            }
                        },
                    },
                    {
                        label: '状态',
                        prop: 'state',
                        align: 'center',
                        width: 90,
                        formatter: (row) => {
                            let filter = $this.stateList.filter((item) => {
                                return item.code == row.state
                            });
                            if (filter.length > 0) {
                                return filter[0].name;
                            }
                            return row.state;
                        },
                    },
                    {
                        label: '模块',
                        prop: 'mode',
                        align: 'center',
                    },
                    {
                        label: '备注',
                        prop: 'note_info',
                        align: 'center',
                        width: 90,
                    },
                ],
                operates: {
                    width: 160,
                    list: [
                        {
                            id: 'info',
                            icon: 'fa fa-weixin',
                            type: 'success',
                            size: 'mini',
                            show: true,
                            tooltip: {
                                content: '微信开放平台配置',
                            },
                            method: (index, row) => {
                                $this.openDialog(row, $this.$api.CODE_WX_OPEN_SETTING, '微信开放平台配置', 'open');
                            },
                        },
                        {
                            id: 'wxgzh',
                            svg: {
                                iconClass: 'icon-wxgzh',
                            },
                            type: 'success',
                            size: 'mini',
                            show: true,
                            tooltip: {
                                content: '微信公众号配置',
                            },
                            method: (index, row) => {
                                $this.openDialog(row, $this.$api.CODE_WX_MP_SETTING, '微信公众号配置', 'mp');
                            },
                        },
                        {
                            id: 'wxxcx',
                            svg: {
                                iconClass: 'icon-wxxcx',
                            },
                            type: 'success',
                            size: 'mini',
                            show: true,
                            tooltip: {
                                content: '微信小程序配置',
                            },
                            method: (index, row) => {
                                $this.openDialog(row, $this.$api.CODE_WX_MINIAPP_SETTING, '微信小程序配置', 'miniapp');
                            },
                        },
                        {
                            id: 'wxpay',
                            svg: {
                                iconClass: 'icon-wxpay',
                            },
                            type: 'success',
                            size: 'mini',
                            show: true,
                            tooltip: {
                                content: '微信支付配置',
                            },
                            method: (index, row) => {
                                $this.openDialog(row, $this.$api.CODE_WX_PAY_SETTING, '微信支付配置', 'pay');
                            },
                        },
                    ],
                },
                pagination: {
                    pageIndex: 1,
                    pageSize: window.configs.pageSize,
                }
            },
            selectionList: [],
            rules: {},
            //弹窗option
            dialogOption: {
                visible: false,
            },
            searchValue: '',
            queryData: {},
            accountSet_sid: '',
        }
    },
    mounted() {
        this.getList();
    },
    methods: {
        handleHeaderEvent(event) {
            let $this = this;
            $this.queryData = $.extend({}, $this.queryData, event.searchForm);
            if (event.type === "search") {
                $this.getList(true);
            } else if (event.type === "refresh") {
                $this.getList(true);
            }
        },
        getList(search) {
            let $this = this;
            $this.dataList = [];
            if (search) {
                $this.tableOptions = $this.resetTablePagination($this.tableOptions);
            }
            let queryData = $this.getQueryParams($this.tableOptions, $this.queryData);
            sysAccountSetApi.findSysAccountSets(queryData, result => {
                if (result.data) {
                    result.data.forEach(t => {
                        if (t.mode && t.mode.startsWith("[")) {
                            t.mode = JSON.parse(t.mode);
                        } else {
                            t.mode = [];
                        }
                    })
                    $this.dataList = result.data || [];
                    $this.tableOptions = $this.setTableTotal($this.tableOptions, result);
                }
            })
        },
        handleTableEvent(event) {
            if (event.type === 'page') {
                this.tableOptions.pagination.pageIndex = page.pageIndex;
                this.tableOptions.pagination.pageSize = page.pageSize;
                this.getList();
                return;
            }
            if (event.type === 'selectionChange') {
                this.selectionList = event.value;
            }
        },
        openDialog(row, code, title, type) {
            let options = { code, title, type };
            this.$refs.weixinSettingDialog && this.$refs.weixinSettingDialog.openDialog(row, options);
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.sys_account_set_container {
    height: 100%;

    .buttons {
        margin: 0 0 10px 0;
    }

    .ceshi {
        max-height: 500px !important;
        z-index: 1000;
    }
}
</style>
